<template>
	<view class="custom_tabs">
		<view class="tabBox">
			<view v-for="(item,index) in tabsList" :key="index" @click="onChangeTab(item,index)" class="tabItem">
				<text class="tabTxt" 
				:class="{activeStyle: activeIndex == index,badge: item.badge != undefined && item.badge != '' && item.badge != 0}" 
				:data-badge="item.badge">{{item.title}}</text>
			</view>
			<view class="active_line" :style="{left: ((activeIndex+1) * (100/tabsList.length) - (100/(tabsList.length*2))) + '%'}"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * @Author: NXJ
	 * @property {Number,String} active 组件的选中值，
	 * @property {Array<Object>} tabs = [{title,badge}] 边框类型
	 * 	@title tabs的文字内容
	 * 	@badge tabs右上角的角标内容
	 */
export default {
		name: 'CustomTabs',
		props: {
			active: {
				type: [Number,String],
				default: 0
			},
			tabs: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				activeIndex: this.active,
				tabsList: this.tabs
			};
		},
		watch: {
			active(newVal){
				this.activeIndex = newVal
				this.$emit('change',{...tabsList[index],newVal})
			},
			tabs(newTabs){
				this.tabsList = newTabs
			}
		},
		methods:{
			onChangeTab(item,index){
				this.activeIndex = index
				this.$emit('change',{...item,index})
			}
		}
	}
</script>

<style lang="scss">
	.custom_tabs{
		position: relative;
		.tabBox {
			display: flex;
			flex-direction: row;
			height: 88rpx;
			background: #FFFFFF;
			// position: sticky;
			// top: 0;
			// z-index: 99;
			.tabItem {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				padding: 16rpx 0;
				.tabTxt {
					font-family: "PingFangSC";
					font-size: 30rpx;
					position: relative;
					&.badge::after{
						content: attr(data-badge);
						position: absolute;
						top: -16rpx;
						right: 0;
						transform: translateX(78%);
						height: 24rpx;
						line-height: 24rpx;
						padding: 2rpx 6rpx;
						font-weight: 400;
						border-radius: 14rpx 14rpx 14rpx 0;
						background-color: #e74c3c;
						color: #FFF;
						font-size: 24rpx;
					}
				}
				.activeStyle {
					font-weight: 600;
					color: #185AFF;
				}
			}
		}
		.active_line{
			height: 6rpx;
			width: 48rpx;
			background: #185AFF;
			border-radius: 4rpx;
			position: absolute;
			left: 25%;
			bottom: 0;
			transform: translateX(-50%);
			transition: all 0.25s;
		}
	}
</style>
